{% extends 'layout/_layout.html' %}

{% block css %}
    <style>
        .chart-item-bg {
            height: 400px;
            float: left;
        }

        .chart-item {
            height: 300px;
            float: left;
        }

        th {
            text-align: center;
        }

        tr {
            text-align: center;
        }
    </style>
{% endblock %}

{% block conent %}
    <ol class="breadcrumb" style="margin-bottom: 0;">
        <li><a href="/cmdb.html">首页</a></li>
        <li class="active">账单管理</li>
    </ol>
    <div>
        <div style="padding: 20px;" class="clearfix">
            <form action="" method="post" enctype="multipart/form-data">
                <div style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;">
                <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                    <span>点击上传文件</span>
                </div>
                <input name="customer_excel" type="file" id="excelFile"
                       style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #333333;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
            </div>
                <div>
                    <span class="small" style="color: #9d9d9d">注意：仅允许上Excel文件</span>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            $('#excelFile').change(function (e) {
                var fileName = e.currentTarget.files[0].name;
                $(this).prev().find('span').text(fileName);
            })
        })
    </script>
{% endblock %}